<template>
  <el-container class="dashboard-container">
    <!-- 侧边栏 -->
    <el-aside class="aside-style" width="200px">
      <el-menu router default-active="1">
        <el-menu-item index="/ManagerDashboard">
          <span>控制台</span>
        </el-menu-item>
        <el-menu-item index="/ManagerDashboard/customer">
          <span>客户管理</span>
        </el-menu-item>
        <el-menu-item index="/ManagerDashboard/card">
          <span>银行卡管理</span>
        </el-menu-item>
        <el-menu-item index="/ManagerDashboard/deposit">
          <span>存款管理</span>
        </el-menu-item>
        <el-menu-item index="/ManagerDashboard/trade">
          <span>交易管理</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <!-- 主内容区 -->
    <el-container>
      <!-- 顶部导航栏 -->
      <el-header class="header-style">
        <div class="header-content">
          <h2>欢迎来到控制台</h2>
          <el-button type="primary" @click="logout">退出登录</el-button>
        </div>
      </el-header>
      <!-- 主要内容 -->
      <el-main class="main-style">
        <!-- 统计卡片 -->
        <el-row :gutter="20" class="statistic-row">
          <el-col :span="8">
            <el-card>
              <div class="statistic-content">
                <el-icon><user /></el-icon>
                <div>
                  <div class="statistic-title">客户数量</div>
                  <div class="statistic-value">{{ customerCount }}</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card>
              <div class="statistic-content">
                <el-icon><credit-card /></el-icon>
                <div>
                  <div class="statistic-title">银行卡数量</div>
                  <div class="statistic-value">{{ cardCount }}</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card>
              <div class="statistic-content">
                <el-icon><coin /></el-icon>
                <div>
                  <div class="statistic-title">总存款额</div>
                  <div class="statistic-value">{{ totalDeposit }} 元</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <!-- 常用操作 -->
        <div v-if="currentRoute === 'ManagerDashboard'">
          <el-card class="action-card">
            <div class="action-title">常用操作</div>
            <div class="action-buttons">
              <el-button type="primary" icon="Plus" @click="openDepositDialog"
              >存款</el-button
              >
              <el-button type="success" icon="Minus" @click="openWithdrawDialog"
              >取款</el-button
              >
              <el-button type="info" icon="Switch" @click="openTransferDialog"
              >转账</el-button
              >
              <el-button type="warning" icon="View" @click="openReportDialog"
              >报表</el-button
              >
              <el-button type="primary" icon="Plus" @click="openAddCustomerDialog"
              >添加客户</el-button
              >
            </div>
          </el-card>
        </div>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
  <!-- 存款对话框 -->
  <el-dialog v-model="depositDialogVisible" title="存款">
    <el-form :model="depositForm">
      <el-form-item label="卡号">
        <el-input
            v-model="depositForm.cardNumber"
            placeholder="请输入卡号"
        ></el-input>
      </el-form-item>
      <el-form-item label="存款金额">
        <el-input-number
            v-model="depositForm.amount"
            :min="1"
            :precision="2"
        ></el-input-number>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="depositDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitDeposit">确认</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 取款对话框 -->
  <el-dialog v-model="withdrawDialogVisible" title="取款">
    <el-form :model="withdrawForm">
      <el-form-item label="卡号">
        <el-input
            v-model="withdrawForm.cardNumber"
            placeholder="请输入卡号"
        ></el-input>
      </el-form-item>
      <el-form-item label="取款金额">
        <el-input-number
            v-model="withdrawForm.amount"
            :min="1"
            :precision="2"
        ></el-input-number>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="withdrawDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitWithdraw">确认</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 转账对话框 -->
  <el-dialog v-model="transferDialogVisible" title="转账">
    <el-form :model="transferForm">
      <el-form-item label="转出卡号">
        <el-input
            v-model="transferForm.fromCardNumber"
            placeholder="请输入转出卡号"
        ></el-input>
      </el-form-item>
      <el-form-item label="转入卡号">
        <el-input
            v-model="transferForm.toCardNumber"
            placeholder="请输入转入卡号"
        ></el-input>
      </el-form-item>
      <el-form-item label="转账金额">
        <el-input-number
            v-model="transferForm.amount"
            :min="1"
            :precision="2"
        ></el-input-number>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="transferDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitTransfer">确认</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 报表对话框 -->
  <el-dialog v-model="reportDialogVisible" title="报表">
    <el-table :data="reportData" border style="width: 100%">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="type" label="类型"></el-table-column>
      <el-table-column prop="amount" label="金额"></el-table-column>
      <el-table-column prop="balance" label="余额"></el-table-column>
    </el-table>
  </el-dialog>
  <!-- 添加客户对话框 -->
  <el-dialog v-model="addCustomerDialogVisible" title="添加客户">
    <el-form :model="customerForm">
      <el-form-item label="PID">
        <el-input
            v-model="customerForm.pid"
            placeholder="请输入PID"
        ></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input
            v-model="customerForm.customerName"
            placeholder="请输入姓名"
        ></el-input>
      </el-form-item>
      <el-form-item label="地址">
        <el-input
            v-model="customerForm.address"
            placeholder="请输入地址"
        ></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input
            v-model="customerForm.telephone"
            placeholder="请输入电话"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addCustomerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitCustomer">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { User, CreditCard, Coin } from "@element-plus/icons-vue";
import { ref, onMounted } from "vue";
import {ElMessage} from 'element-plus'
import { useRoute } from "vue-router";
import axios from "axios";

export default {
  name: "DashboardView",
  components: {
    User,
    CreditCard,
    Coin,
  },
  setup() {
    const route = useRoute();
    const currentRoute = ref(route.name);

    // 真实数据状态
    const customerCount = ref(0);
    const cardCount = ref(0);
    const totalDeposit = ref(0);

    // 对话框状态
    const depositDialogVisible = ref(false);
    const withdrawDialogVisible = ref(false);
    const transferDialogVisible = ref(false);
    const reportDialogVisible = ref(false);
    const addCustomerDialogVisible = ref(false);

    // 表单数据
    const depositForm = ref({
      cardNumber: "",
      amount: 0,
    });
    const withdrawForm = ref({
      cardNumber: "",
      amount: 0,
    });
    const transferForm = ref({
      fromCardNumber: "",
      toCardNumber: "",
      amount: 0,
    });
    const customerForm = ref({
      pid: "",
      address: "",
      customerName: "",
      telephone: "",
    });

    // 报表数据（假设从后端获取）
    const reportData = ref([]);

    // 从后端获取统计数据
    const fetchStatistics = async () => {
      try {
        // 获取客户数量
        const customerResponse = await axios.get('http://localhost:8088/api/customers/count');
        customerCount.value = customerResponse.data;

        // 获取银行卡数量
        const cardResponse = await axios.get('http://localhost:8088/api/cards/totalCards');
        cardCount.value = cardResponse.data;

        // 获取总存款额
        const balanceResponse = await axios.get('http://localhost:8088/api/cards/alltotalBalance');
        totalDeposit.value = balanceResponse.data;
      } catch (error) {
        console.error('获取统计数据失败:', error);
        ElMessage.error('获取统计数据失败，请稍后再试');
      }
    };

    // 打开对话框
    const openDepositDialog = () => {
      depositDialogVisible.value = true;
    };
    const openWithdrawDialog = () => {
      withdrawDialogVisible.value = true;
    };
    const openTransferDialog = () => {
      transferDialogVisible.value = true;
    };
    const openReportDialog = () => {
      reportDialogVisible.value = true;
    };
    const openAddCustomerDialog = () => {
      addCustomerDialogVisible.value = true;
    };

    // 提交表单
    const submitDeposit = () => {
      // 这里可以添加存款逻辑
      depositDialogVisible.value = false;
    };
    const submitWithdraw = () => {
      // 这里可以添加取款逻辑
      withdrawDialogVisible.value = false;
    };
    const submitTransfer = () => {
      // 这里可以添加转账逻辑
      transferDialogVisible.value = false;
    };
    const submitCustomer = () => {
      // 提交客户数据
      if (
          !customerForm.value.pid ||
          !customerForm.value.address ||
          !customerForm.value.customerName ||
          !customerForm.value.telephone
      ) {
        alert("请填写所有客户信息");
        return;
      }

      axios
          .post("http://localhost:8088/api/customers/insert", {
            pid: customerForm.value.pid,
            address: customerForm.value.address,
            customerName: customerForm.value.customerName,
            telephone: customerForm.value.telephone,
          })
          .then((response) => {
            console.log("客户添加成功:", response.data);
            alert("客户添加成功");
            addCustomerDialogVisible.value = false;
            // 清空表单
            customerForm.value = {
              pid: "",
              address: "",
              customerName: "",
              telephone: "",
            };
            // 刷新统计数据
            fetchStatistics();
          })
          .catch((error) => {
            console.error("添加客户失败:", error);
            alert("添加客户失败，请检查输入信息");
          });
    };

    // 退出登录
    const logout = () => {
      localStorage.removeItem("token");
      window.location.href = "/login";
    };

    // 生命周期钩子：组件挂载后获取数据
    onMounted(() => {
      fetchStatistics();
    });

    return {
      currentRoute,
      customerCount,
      cardCount,
      totalDeposit,
      depositDialogVisible,
      withdrawDialogVisible,
      transferDialogVisible,
      reportDialogVisible,
      addCustomerDialogVisible,
      depositForm,
      withdrawForm,
      transferForm,
      customerForm,
      reportData,
      openDepositDialog,
      openWithdrawDialog,
      openTransferDialog,
      openReportDialog,
      openAddCustomerDialog,
      submitDeposit,
      submitWithdraw,
      submitTransfer,
      submitCustomer,
      logout,
    };
  },
};
</script>
<style scoped>
.dashboard-container {
  height: 100vh;
  display: flex;
}
.aside-style {
  background-color: #f5f5f5;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
}
.header-style {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px 20px;
  position: fixed;
  top: 0;
  right: 0;
  left: 200px;
  z-index: 99;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.main-style {
  margin-left: 200px;
  margin-top: 60px;
  padding: 20px;
}
.statistic-row {
  margin-bottom: 20px;
}
.statistic-content {
  display: flex;
  align-items: center;
}
.statistic-content.el-icon {
  font-size: 24px;
  margin-right: 10px;
}
.action-card {
  margin-top: 20px;
}
.action-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}
.action-buttons {
  display: flex;
  justify-content: space-around;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>